<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style>

        /* 1.元素选择器（E）：通过标签名来选择元素 */
        h1{
            color: cadetblue;
        }

        /* 2.类选择器（.classname）：通过class的属性值来选择元素 */
        .d{
            width: 200px;
            height: 200px;
        }

        .d1{
            background-color: orange;
        }

        .d2{
            /* 边框的粗细  边框的样式 颜色 */
            border: 2px dotted blue;
        }

        /* 3.id选择器（#id）：通过id属性值选择元素 */
        #hh{
            background-color:pink;
        }

        /* 4.后代选择器（E 空格F）：选择E元素下所有的F选择器，无论是子元素还是子孙元素 */
        /*ul li{
            color: cadetblue;
        }*/

        /* 5.子元素选择器（E>F）:选择E元素的直接子元素F */
        /*.u1>li{
            color: cadetblue;
        }*/

        /* 6.相邻兄弟选择器（E+F）:具有相同父元素，选择E后面紧挨着的F元素 */
        /*.u1+li{
            color: cadetblue;
        }*/

        /* 7.通用兄弟选择器（E~F）, CSS3新增加一种选择器：具有相同父元素，选择E后面所有的F元素 */
        .u1~li{
            color: cadetblue;
        }

    </style>

</head>
<body>

    <h1>今天星期四</h1>
    <h1 id="hh">今天是阴天</h1>

    <div class="d d1"></div>
    <div class="d d2"></div>

    <ul class="u1">
        <li>aaaaaaaaaa</li>
        <li>bbbbbbbbbb</li>
        <li>cccccccccc</li>
        <ul class="u2">
            <li>111111111111</li>
            <li>222222222222</li>
            <li>333333333333</li>
        </ul>
    </ul>
    <li>qqqqqqqqqqq</li>
    <li>wwwwwwwwwww</li>
    <li>rrrrrrrrrrr</li>

</body>
</html>